<template>
	
	<view class="pdwlzt">
		<GlobalHeader text="发电机组参数(3主1应)" xh="CW6250C1360DF7" xlh="2522L000026" :hour="null"></GlobalHeader>
		<view class="pdwlzt-page" ref="pdwlztBjRef">
			<view style="
		  top: 10px;
		  height: 40%;
          position: absolute;
          z-index: 4;
          display: flex;
          flex-wrap: nowrap;
          justify-content: center;
        ">
				<Gauge min="0" max="2000" :value="powerListDate[0]?.z301.currentValue"
					:customStyle="{ marginLeft: '6%', }" style="
		    height: 100%;
		  "></Gauge>
				<Gauge min="0" max="2000" :value="powerListDate[1]?.['z' + (301 + 16 * 1)]?.currentValue" style="
		    height: 100%;
		  "></Gauge>
				<Gauge min="0" max="2000" :value="powerListDate[2]?.['z' + (301 + 16 * 2)]?.currentValue" style="
		    height: 100%;
		  "></Gauge>
				<Gauge min="0" max="2000" :value="powerListDate[3]?.['z' + (301 + 16 * 3)]?.currentValue"
					:customStyle="{ marginLeft: '2%' }" style="
		    height: 100%;
		  "></Gauge>
			</view>
			<view style="
          width: 100%;
          height: 40%;
          background: rgb(45, 73, 97);
          position: absolute;
          z-index: 3;
          left: 0;
          top: 0;
        "></view>
			<view class="round" v-for="(item, index) in powInfo" :style="{ ...item.roundStyle }" :key="index">
				<view :class="['circle']" :style="{
            background: stateLight(renderValue(index)),
          }"></view>
				<view :class="{
            circle_bottom: true,
            animation: LightAni(renderValue(index)),
          }" :style="{
            background: stateLight(renderValue(index)),
            display: LightAni(renderValue(index)) ? 'block' : 'none',
          }"></view>
				<view :class="{
            circle_bottom2: true,
            animation2: LightAni(renderValue(index)),
          }" :style="{
            background: stateLight(renderValue(index)),
            display: LightAni(renderValue(index)) ? 'block' : 'none',
          }"></view>
			</view>
			<view style="
          justify-content: center;
          position: absolute;
          z-index: 5;
          bottom: 0;
          display: flex;
          top: 70%;
          color: #fff;
          font-size: 12px;
		  width: 95%;
		  left:7%
        ">
				<view 		
				  :style="{ 
				    width: index === 3 ? '28%' : '24%',
				
				  }" 
				  v-for="(item, index) in powerListDate" 
				  :key="index"
				>
					<view style="margin: 3rpx 0">
						水温:{{
              isEmptyToCharacter(renderbottomData(item, startNo[0], index, 1))
            }}℃
					</view>
					<view style="margin: 3rpx 0">
						油温:{{
              isEmptyToCharacter(renderbottomData(item, startNo[1], index, 1))
            }}℃
					</view>
					<view style="margin: 3rpx 0">
						油压:{{
              isEmptyToCharacter(renderbottomData(item, startNo[2], index, 2))
            }}bar
					</view>
					<view style="margin: 3rpx 0">
						电池:{{
              isEmptyToCharacter(renderbottomData(item, startNo[3], index, 1))
            }}V
					</view>
					<view style="margin: 3rpx 0">
						累时:{{
              isEmptyToCharacter(renderbottomData(item, startNo[4], index, 0))
            }}h
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch,
		inject
	} from 'vue';
	import GlobalHeader from "@/components/layout/GlobalHeader.vue";
	import Gauge from "@/components/echats/gauge2.vue";
	import {
		straightLine,
		curveLine
	} from "@/mixins/globalRaphael.js";
	import {
		color as colors
	} from "@/mixins/globalParam.js";
	import {
		initDecimalPlaces
	} from "@/utils/utils.js";
	import {
		isEmptyToCharacter
	} from "@/plugins/index.js";

	let allData = inject('allData');
	let powerListDate = ref([]);
	let pdwlztBjRef = ref(null);
	let off = [-22, 220.5, 465.5, 770.5];
	let on = [0, 243.5, 486.5, 791.5];
	let powInfo = [{
			boxStyle: {
				top: "407rpx",
				left: "438rpx",
			},
			max: "350",
			chartStyle: {
				height: "280rpx",
				width: "100rpx",
			},
			roundStyle: {
				top: "55%",
				left: "16.2%",
			},
		},
		{
			boxStyle: {
				top: "407rpx",
				left: "680rpx",
			},
			max: "350",
			chartStyle: {
				height: "280rpx",
				width: "100rpx",
			},
			roundStyle: {
				top: "55%",
				left: "37.5%",
			},
		},
		{
			boxStyle: {
				top: "407rpx",
				left: "925rpx",
			},
			max: "350",
			chartStyle: {
				height: "280rpx",
				width: "100rpx",
			},
			roundStyle: {
				top: "55%",
				left: "59%",
			},
		},
		{
			boxStyle: {
				top: "407rpx",
				left: "1230rpx",
			},
			max: "100",
			chartStyle: {
				height: "280rpx",
				width: "100rpx",
			},
			roundStyle: {
				top: "55%",
				left: "85.8%",
			},
		},
	];
	let startNo = [305, 306, 307, 308, 303];

	// 电流 > 10 开启
	let stateLight = computed(() => {
		return (zjVal) => {
			if (zjVal >= 10) return colors[3];
			return colors[0];
		};
	});

	let LightAni = computed(() => {
		return (zjVal) => {
			if (zjVal >= 10) return true;
			return false;
		};
	});

	watch(
		() => allData.value,
		(newVal) => {
			powerListDate.value[0] = newVal.power1;
			powerListDate.value[1] = newVal.power2;
			powerListDate.value[2] = newVal.power3;
			powerListDate.value[3] = newVal.power_bak;
		}, {
			deep: true,
		}
	);

	let renderValue = computed(() => {
		return (index) => {
			let key = "z" + (311 + 16 * index);
			let value = powerListDate.value[index]?.[key]?.currentValue || 0;
			return value;
		};
	});

	let renderbottomData = computed(() => {
		return (item, no, index, init) => {
			return (
				item?.["z" + (no + 16 * index)]?.currentValue ?? initDecimalPlaces(init)
			);
		};
	});

	let isEmptyArraySetCont = computed(() => {
		return (arr, setArr) => {
			if (Array.isArray(arr) && arr.length > 0) {
				return arr;
			} else {
				return setArr;
			}
		};
	});
</script>

<style scoped lang="scss">
	.pdwlzt {

		padding: 50px 5px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 水平居中 */
	}

	.pdwlzt-page {
		top: 10%;
		position: relative;
		width: 115%;
		height: 40%;
		background: url("@/assets/images/pdwlzk.png") no-repeat center center;
		background-size: 100% 100%;

	}

	.round {
		position: absolute;
		height: 100%;
		width: 100% // top: 364rpx;
			// padding-top: 15rpx;
			// padding-left: 10rpx;
	}

	.warning {
		background-color: rgb(214, 58, 58) !important;
	}

	.stoping {
		background: gray !important;
	}

	.running {
		background-color: green !important;
	}

	.round view {
		background: rgba(192, 192, 192, 1);
	}

	.circle {
		width: 4.7%;
		height: 6.7%;
		z-index: 999;
		text-align: center;

		position: absolute;
	}

	.circle_bottom {
		background: rgba(58, 150, 225, 0.4);
		width: 5%;
		height: 8.5%;
		position: absolute;
		top: -0.8%;
		left: -0.2%;
		display: none;
	}

	.circle_bottom2 {
		background: rgba(58, 150, 225, 0.2);
		width: 6%;
		height: 9%;
		position: relative;
		top: -1%;
		left: -0.5%;
		display: none;
	}

	.animation {
		-webkit-animation: twinkling 1s infinite ease-in-out;
		animation: twinkling 1s infinite ease-in-out;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	.animation2 {
		-webkit-animation: twinkling 1s infinite ease-in-out;
		animation: twinkling 1s infinite ease-in-out;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	@keyframes twinkling {
		0% {
			opacity: 0.2;
			-webkit-transform: scale(1);
			transform: scale(1);
		}

		50% {
			opacity: 0.5;
			-webkit-transform: scale(1.12);
			transform: scale(1.12);
		}

		100% {
			opacity: 0.2;
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}

	.clPcolor {
		width: 50rpx;
		height: 50rpx;
		background-color: green;
		animation: clP 0.5s infinite;
	}

	.pdwlzt-page-box {
		display: flex;
		position: absolute;
		align-items: center;
		top: 407rpx;
		left: 438rpx;
		color: #fff;
	}

	.pdwlzt-page-box>view {
		padding: 6rpx 0;
	}

	@keyframes clP {
		from {
			opacity: 1;
		}

		to {
			opacity: 0.1;
		}
	}
</style>